import React from 'react';
import {observer, inject} from 'mobx-react';

import {AsideNav, Button} from 'amis';
import {Link} from 'react-router-dom';
import {IMainStore} from '../../store';
import {RouteComponentProps, matchPath, Switch, Route} from 'react-router';

import '@fortawesome/fontawesome-free/css/all.css'

export default inject('store')(
    observer(function ({store}: { store: IMainStore } & RouteComponentProps) {
        const navigations = [{
            label: 'ROOT',
            title: 'ROOT',
            path: '/root',
            unfolded: true,
            hidden: false,
            icon: '',
            children: [{
                label: 'ROOT-1',
                path: '/root-1',
                hidden: false,
                active: true,
                icon: '',
                children: [{
                    label: 'ROOT-1-1',
                    path: '/root-1-1',
                    hidden: false,
                    icon: '',
                    children: [{
                        label: 'ROOT-1-1-1',
                        path: '/root-1-1-1',
                        hidden: false,
                        icon: '',
                    }],
                }]
            }, {
                label: 'ROOT-2',
                path: '/root-2',
                to: '/root-2',
                hidden: false,
                icon: '',
            }]
        }];

        return (
            <AsideNav
                key={store.asideFolded ? 'folded-aside' : 'aside'}
                navigations={[
                    {
                        label: '导航',
                        children: navigations
                    }
                ]}

                renderLink={({link, toggleExpand, classnames: cx, depth}: any) => {
                    if (link.hidden) {
                        return null;
                    }
                    console.log(toggleExpand)
                    return (
                        <Link to={link.path[0] === '/' ? link.path : `${link.path}`}>
                            {link.children && link.children.length > 0 ? (
                                <i onClick={e => {
                                    toggleExpand(link)
                                    e.stopPropagation();
                                    e.preventDefault();
                                }} key="icon"
                                   className={cx(`AsideNav-itemIcon`, link.open ? 'fas fa-angle-down' : 'fas fa-angle-right')}/>
                            ) : <i className={cx(`AsideNav-itemIcon`, 'fas fa-file')}/>}
                            <span key="label" className={cx('AsideNav-itemLabel')}>
                                    {link.label}
                                </span>
                        </Link>
                    )
                }}
            />
        );
    })
);
